<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <title>Vue 3 + Axios CDN 示例</title>
</head>

<body>
    <div id="app">
        <h1>用户列表（Axios 获取）</h1>

        <button @click="fetchUsers" :disabled="loading">
            {{ loading ? '加载中...' : '获取用户' }}
        </button>

        <ul v-if="users.length">
            <li v-for="user in users" :key="user.id">
                {{ user.name }} - {{ user.email }}
            </li>
        </ul>

        <p v-if="error" style="color: red;">错误：{{ error }}</p>
    </div>

    <!-- 引入 Vue 3 (必须包含模板编译器) -->
    <script src="../lib/vue/3/vue.global.js"></script>

    <!-- 引入 Axios -->
    <script src="../lib/axios/axios.min.js"></script>
    <script>
        const { createApp } = Vue;
        const options = {
            data: function () {
                return {
                    users: [],
                    loading: false,
                    error: ''
                }
            },
            methods: {
                async fetchUsers() {
                    this.loading = true;
                    this.error = '';
                    try {
                        // 使用全局 axios 发起请求
                        const response = await axios.get('https://jsonplaceholder.typicode.com/users');
                        this.users = response.data;
                    } catch (err) {
                        this. error = err.message || '请求失败';
                    } finally {
                        this.loading = false;
                    }
                }
            },
        }
        const app = createApp(options);
        // 挂载
        const vm = app.mount('#app');
    </script>
</body>

</html>